<mat-card class="login-card">
  <mat-card-header>
    <mat-card-title>登录</mat-card-title>
    <mat-card-subtitle>登录你的账号</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content class="login-content"
                    *ngIf="configService.globalConfig && configService.globalConfig.loginState === false">
    <p>登录通道关闭</p>
  </mat-card-content>
  <mat-card-content class="login-content"
                    *ngIf="configService.globalConfig && configService.globalConfig.loginState === true">
    <form [formGroup]="formModel">
      <mat-form-field>
        <input matInput placeholder="Email" formControlName="email" required>
        <mat-icon matSuffix svgIcon="email"></mat-icon>
        <mat-error *ngIf="formModel.hasError('required','email')">
          Email不能为<strong>空</strong>
        </mat-error>
        <mat-error *ngIf="formModel.hasError('email','email') && !formModel.hasError('required','email')">
          请输入<strong>正确</strong>的Email
        </mat-error>

        <mat-error *ngIf="formModel.hasError('minlength','email')|| formModel.hasError('maxlength','email')">
          Email长度为<strong>6-255</strong>之间
        </mat-error>
      </mat-form-field>

      <mat-form-field>
        <input matInput placeholder="密码" formControlName="password"
               [type]="hide ? 'password' : 'text'" required>
        <mat-error *ngIf="formModel.hasError('required','password')">
          密码不能为<strong>空</strong>
        </mat-error>
        <mat-error
          *ngIf="formModel.hasError('minlength','password') || formModel.hasError('maxlength','password')">
          密码长度为<strong>6-32</strong>之间
        </mat-error>
        <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'隐藏密码'"
                [attr.aria-pressed]="hide">
          <mat-icon [svgIcon]="hide ? 'visibility_off' : 'visibility'"></mat-icon>
        </button>
      </mat-form-field>

      <img class="captcha-img" src="{{imgUrl}}" *ngIf="imgUrl" (click)="changeCaptcha()" alt="" matTooltip="点击刷新验证码"
           [matTooltipPosition]="'right'">

      <mat-form-field id="login-field-captcha" style="width: 150px">
        <input matInput placeholder="验证码" formControlName="captcha" required>
        <mat-icon matSuffix svgIcon="textsms"></mat-icon>
        <mat-error *ngIf="formModel.hasError('required','captcha')">
          验证码不能为<strong>空</strong>
        </mat-error>
      </mat-form-field>
    </form>

    <!--    <mat-checkbox [(ngModel)]="rememberMe">记住密码</mat-checkbox>-->
  </mat-card-content>
  <mat-card-actions>
    <button mat-button color="primary" [routerLink]="'../recover'">忘记密码</button>
    <button *ngIf="configService.globalConfig && configService.globalConfig.registerState === true" mat-button
            color="warn" [routerLink]="'../register'">注册
    </button>
    <button *ngIf="configService.globalConfig && configService.globalConfig.loginState === true" mat-button
            id="login-button-right" color="accent" (click)="onSubmit()">
      登录
    </button>
  </mat-card-actions>
</mat-card>
